<template>
    <div id="login" @keydown.enter="handleLogin">
      <div class="login-con">
        <Card :bordered="false">
          <!-- <p slot="title">
            <Icon type="log-in"></Icon>
              欢迎登录
          </p> -->
            <Icon type="log-in"></Icon>
            <span slot="title">账号登录</span>
          <div class="form-con">
            <Form ref="loginForm" :model="loginForm" :rules="loginRules" >
              <FormItem prop="userName">
                <i-Input v-model="loginForm.username" placeholder="请输入用户名">
                  <span slot="prepend">
                    <Icon :size="16" type="ios-person-outline"></Icon>
                  </span>
                </i-Input>
              </FormItem>
              <FormItem prop="password">
                <i-Input type="password" v-model="loginForm.password" placeholder="请输入密码">
                  <span slot="prepend">
                    <Icon :size="14" type="ios-lock-outline"></Icon>
                  </span>
                </i-Input>
              </FormItem>
              <FormItem>
                <Button @click="handleLogin" :loading="loading" type="primary"  long>
                  <span v-if="!loading">登录</span>
                  <span v-else>登录中...</span>
                </Button>
              </FormItem>
            </Form>
          </div>
        </Card>
        
      </div>
    </div>
  </template>
  <script>
  import util from "../../api/util.js";
  export default {
    data(){
      return{
        loading:false,
        loginForm:{
          username:'',
          password:''
        },
        loginRules:{
          username:[
            {
              required:true,
              message:'Please fill in the username',
              trigger:"blur"
            }
          ],
          password:[
            {
              required:true,
              message:'Please fill in the password.',
              trigger:"blur"
            }
          ]
        },
      }
    },
    methods:{
      async handleLogin(){
        let self = this;
        this.$refs['loginForm'].validate(async (valid) => {
        if(valid){
            var param = {"username":self.loginForm.username, "password":self.loginForm.password};
            // util.post(this,'sys_user/login',param,function(datas){ //向后端发送登录请求，执行登录操作，将用户名和密码发送过去
            //   //登陆后，利用localStorage存储用户信息
            //   console.log("登录信息",datas);
            //   localStorage.setItem('token',datas.data.token);
            //   self.$Message.info("登录成功");
            //   // self.$router.push({
            //   //   //name:menuList[0].name + "_index"
            //   //   name:"home"
            //   // }).catch(err => err);
            // });
            let datas = await util.postAsync('sys_user/login',param)
            
            if(datas.data.errno == 0)//这里用来写你请求成功的判断方式
            {
              //console.log(datas.data.data);
              //这里进行数据处理
              localStorage.setItem('token',datas.data.data.token);
              localStorage.setItem("user", datas.data.data.username);
              localStorage.setItem("user_id", datas.data.data.id);
              localStorage.setItem("menuList", JSON.stringify(datas.data.data.menu));
              let routerList = util.reloadMenu(datas.data.data.menu);
              this.$router.addRoutes(routerList);
              this.$router.push({
                path:"/"
              })
            }
          }
        })
      },
      getImg(url){
        return require("./" + url);
      }
    },
    mounted() {
      //console.log(123456789);
    },
      
  }
  </script>
  <style lang="less" scoped>
  #login{
    width:100%;
    height:100%;
   // top:5px;
    background-image: url('./login.png');
    // background-size: cover;
    // background-position: center;
    // position:sticky;  
    margin:0px;
    background-size:100% 100%;
    background-attachment:fixed;
  }
  .login-con{
    position:absolute;
    right: 360px;
    top: 60%;
    transform: translateY(-60%);
    width: 550px;
    height: 500px;
    //left:calc(50%-50px);
    //top:calc(50%-50px);  
  }
  .form-con{
    padding: 10px 0 0;
    width: 500px;
    height:250px;
    //position:absolute;
    left:calc(50%-50px);
    top:calc(50%-50px);  
  }
  .login-tip{
    font-size: 10px;
    text-align: center;
    color: #c3c3c3;
  }

  .circleButton{
    border: none;
    width:120px;
    height:50px;
    //background-color: white;
    border: none;
    background-color: transparent;
    outline: none;    //消除默认点击蓝色边框效果
    // border-radius: 50px 50px ;
    // background-image: url('./zuel.jpg');
    // background-size: cover;
    // background-position: center;
  }
  .circleButton:hover{
    cursor: pointer;
  }
  
  </style>
  
  
  